<template>
	<div class="cockpit-container">
		<!-- 标题 -->
		<el-row>
			<el-col :span="24">
				<div class="system-title">
					<span style="cursor: pointer" @click="jumpPage(1)">{{ title }}</span>
				</div>
			</el-col>
		</el-row>

		<el-container>
			<el-aside class="left-aside" width="30%">
				<el-row>
					<!-- 系统总览 -->
					<el-col :span="24" class="col-container">
						<div class="chart-background-system-overview">
							<div class="yd-flex" style="padding: 3px 0">
								<div class="chart-title yd-flex" style="height: 100%">
									<svg-icon icon-class="cc-dot" style="color: #2beded; font-size: 16px"></svg-icon>
									<span style="cursor: pointer" @click="jumpPage(2)">系统总览</span>
									<span style="font-size: 12px">{{ interval.countDown }}s后自动刷新{{ interval.pauseFlag ? ',已暂停' : '' }}</span>
								</div>
								<el-select
									v-model="formData.systemIdList"
									multiple
									:multiple-limit="5"
									collapse-tags
									style="width: 200px; margin: 5px 10px 0px 0px"
									@change="systemSelectChange()"
								>
									<el-option v-for="option in systemOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
								</el-select>
							</div>

							<el-table
								ref="systemOverviewTable"
								v-loading="loading.systemOverview"
								size="small"
								:data="systemOverviewData"
								:highlight-current-row="true"
								style="padding: 0px 3px 3px 3px; flex: 1"
								@row-click="rowClickHandler"
							>
								<el-table-column align="center" prop="systemName" label="系统名称" min-width="3"></el-table-column>
								<el-table-column align="center" prop="systemBusiTotal" label="业务数" min-width="2"></el-table-column>
								<el-table-column align="center" prop="reqCount" label="请求量" min-width="2">
									<template #default="scope">
										<span>{{ scope.row.reqCount === null ? '-' : scope.row.reqCount }}</span>
									</template>
								</el-table-column>
								<el-table-column align="center" prop="alarmCount" label="告警量" min-width="2">
									<template #default="scope">
										<span style="color: #ff9a0c">{{ scope.row.alarmCount === null ? '-' : scope.row.alarmCount }}</span>
									</template>
								</el-table-column>
								<el-table-column align="center" prop="healthRatio" label="健康度" min-width="2">
									<template #default="scope">
										<span>{{ scope.row.healthRatio === null ? '-' : scope.row.healthRatio + '%' }}</span>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</el-col>
					<!-- 失败量趋势 -->
					<el-col :span="24" class="col-container">
						<div class="chart-background">
							<div class="chart-title">
								<svg-icon icon-class="cc-dot color-primary" style="font-size: 16px"></svg-icon>
								<span style="cursor: pointer" @click="jumpPage(5)">失败量趋势</span>
								<span class="zhankai" @click="openDialog(1)">
									<a style="color: #fff">
										展开
										<el-icon><CaretRight /></el-icon>
									</a>
								</span>
							</div>
							<div id="failTrendChartId" v-loading="loading.failTrend" style="height: 85%"></div>
						</div>
					</el-col>
					<!-- 告警量趋势 -->
					<el-col :span="24" class="col-container">
						<div class="chart-background">
							<div class="chart-title">
								<svg-icon icon-class="cc-dot" style="color: #2beded; font-size: 16px"></svg-icon>
								<span style="cursor: pointer" @click="jumpPage(8)">告警量趋势</span>
								<span class="zhankai" @click="openDialog(2)">
									<a style="color: #fff">
										展开
										<el-icon><CaretRight /></el-icon>
									</a>
								</span>
							</div>
							<div id="systemAlarmTrendChartId" v-loading="loading.systemAlarmTrend" style="height: 85%"></div>
						</div>
					</el-col>
				</el-row>
			</el-aside>

			<el-container>
				<!-- 业务健康度 -->
				<el-header class="header" height="25%">
					<div class="chart-background">
						<div class="chart-title">
							<svg-icon icon-class="cc-dot" style="color: #2beded; font-size: 16px"></svg-icon>
							<span style="cursor: pointer" @click="jumpPage(3)">业务健康度</span>
						</div>
						<div id="businessHealthyTopNChartId" v-loading="loading.businessHealthyTopN" style="height: 85%"></div>
					</div>
				</el-header>
				<!-- 请求量趋势 -->
				<el-main class="main" style="position: relative">
					<div class="chart-background">
						<div class="chart-title">
							<svg-icon icon-class="cc-dot" style="color: #2beded; font-size: 16px"></svg-icon>
							<span @click="jumpPage(6)" style="cursor: pointer">请求量趋势</span>
							<span class="zhankai" @click="openDialog(3)">
								<a style="color: #fff">
									展开
									<el-icon><CaretRight /></el-icon>
								</a>
							</span>
						</div>
						<div class="yd-flex" style="padding: 0 30px; margin-bottom: -18px">
							<span></span>
							<el-tooltip effect="light" :z-index="9999">
								<span style="z-index: 99">历史峰值：{{ reqPeek.requestCount }}</span>
								<template #content>
									<p>历史峰值：{{ reqPeek.requestCount }}</p>
									<p>发生时间：{{ reqPeek.beginTime }} - {{ reqPeek.endTime }}</p>
								</template>
							</el-tooltip>
						</div>

						<div v-loading="loading.requestTrend" id="requestTrendChartId" style="height: 85%"></div>
					</div>
				</el-main>
				<!-- 流量变化趋势 -->
				<el-footer class="footer">
					<div class="chart-background">
						<div class="chart-title" @click="handleShowFlowTrend()">
							<svg-icon icon-class="cc-dot" style="color: #2beded; font-size: 16px"></svg-icon>
							<span v-show="showFlowTrend" style="cursor: pointer">流量变化趋势</span>
							<span v-show="!showFlowTrend" style="cursor: pointer">业务办理时长变化趋势</span>
						</div>
						<div v-show="showFlowTrend" class="yd-flex" style="padding: 0 30px; margin-bottom: -18px">
							<span></span>
							<el-tooltip effect="light" :z-index="9999">
								<span style="z-index: 99">历史峰值：{{ flowPeek.requestCount }}</span>
								<template #content>
									<p>历史峰值：{{ flowPeek.requestCount }}</p>
									<p>发生时间：{{ flowPeek.beginTime }} - {{ flowPeek.endTime }}</p>
								</template>
							</el-tooltip>
						</div>
						<div v-if="showFlowTrend" id="flowTrendChartId" style="height: 85%"></div>
						<div v-else id="busiDealTimeTrendChartId" style="height: 85%"></div>
					</div>
				</el-footer>
			</el-container>
			<el-aside class="right-aside" width="30%">
				<el-row>
					<!-- 业务访问量TOP10 -->
					<el-col :span="24" class="col-container">
						<div class="chart-background">
							<div class="chart-title">
								<svg-icon icon-class="cc-dot" style="color: #2beded; font-size: 16px"></svg-icon>
								<span @click="jumpPage(7)" style="cursor: pointer">业务访问量TOP10</span>
								<span class="zhankai" @click="openDialog1()">
									<a style="color: #fff">
										展开
										<el-icon><CaretRight /></el-icon>
									</a>
								</span>
							</div>
							<div v-loading="loading.businessVisitTopN" id="businessVisitTopNChartId" style="height: 85%"></div>
						</div>
					</el-col>
					<!-- 网端告警TOP10 -->
					<el-col :span="24" class="col-container">
						<div class="chart-background">
							<div class="chart-title">
								<svg-icon icon-class="cc-dot" style="color: #2beded; font-size: 16px"></svg-icon>
								<span @click="jumpPage(10)" style="cursor: pointer">网端告警TOP10</span>
								<span class="zhankai" @click="openDialog2()">
									<a style="color: #fff">
										展开
										<el-icon><CaretRight /></el-icon>
									</a>
								</span>
							</div>
							<div v-loading="loading.segmentAlarmTopN" id="segmentAlarmTopNChartId" style="height: 85%"></div>
						</div>
					</el-col>
					<!-- 网端流量TOP10占比 -->
					<el-col :span="24" class="col-container">
						<div class="chart-background">
							<div class="chart-title" @click="handleShowSegmentFlow">
								<svg-icon icon-class="cc-dot" style="color: #2beded; font-size: 16px"></svg-icon>
								<span v-if="showSegmentFlow" style="cursor: pointer">网端流量TOP10占比</span>
								<span v-else style="cursor: pointer">网端请求TOP10占比</span>
							</div>
							<div v-show="showSegmentFlow" v-loading="loading.segmentFlowTopN" id="segmentFlowTopNChartId" style="height: 85%"></div>
							<div v-show="!showSegmentFlow" v-loading="loading.segmentFlowTopN" id="segmentReqTopNChartId" style="height: 85%"></div>
						</div>
					</el-col>
				</el-row>
			</el-aside>
		</el-container>

		<el-dialog
			id="advanced-query-form-dialog"
			:key="dialogId"
			v-model="dialogShow"
			width="1100px"
			height="600px"
			custom-class="advanced-query-class"
			:title="dialogTitle"
			:show-close="false"
		>
			<div id="runTrendChartId" ref="runTrendChartId" style="height: 400px; width: 1000px"></div>
		</el-dialog>
		<el-dialog v-model="dialogShow1" width="1100px" height="600px" custom-class="advanced-query-class" :show-close="false">
			<yd-card>
				<div class="yd-card-header yd-flex">
					<div class="yd-card-title">
						<div class="yd-circle"></div>
						<span>{{ formData.systemName }}-业务总览</span>
					</div>
					<div class="yd-flex1">
						<yd-form
							ref="businessForm"
							:model="formDatas.businessFormData"
							:options="formOptions.businessFormOptions"
							@change="handleBusinessChange"
						></yd-form>
						<!-- <el-button type="text" size="small" :disabled="exportDisable2" :loading="downloading2" @click="handleExportBusi">
							<svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
						</el-button> -->
					</div>
				</div>
				<YdTable
					:formData="formDatas.businessFormData"
					:tableConfig="tableConfigs.businessOverviewConfig"
					:tableData="tableDatas.businessOverviewData"
					@sizeChangeHandler="queryBusinessOverview"
					@currentChangeHandler="queryBusinessOverview"
					@sortChangeHandler="queryBusinessOverview"
				></YdTable>
			</yd-card>
		</el-dialog>
		<el-dialog v-model="dialogShow2" width="1100px" height="600px" custom-class="advanced-query-class" :title="dialogTitle" :show-close="false">
			<yd-card>
				<div class="yd-card-header yd-flex">
					<div class="yd-card-title">
						<div class="yd-circle"></div>
						<span>{{ formData.systemName }}-网端总览</span>
					</div>
					<div class="yd-flex1">
						<yd-form
							ref="segmentForm"
							:model="formDatas.segmentFormData"
							:options="formOptions.segmentFormOptions"
							@change="handleSegmentChange"
						></yd-form>
						<!-- <el-button type="text" size="small" :disabled="exportDisable3" :loading="downloading3" @click="handleExportSegment">
							<svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
						</el-button> -->
					</div>
				</div>
				<YdTable
					:formData="formDatas.segmentFormData"
					:tableConfig="tableConfigs.segmentOverviewConfig"
					:tableData="tableDatas.segmentOverviewData"
					@sizeChangeHandler="querySegmentOverview"
					@currentChangeHandler="querySegmentOverview"
					@sortChangeHandler="querySegmentOverview"
				></YdTable>
			</yd-card>
		</el-dialog>
	</div>
</template>

<script setup name="cockpit" lang="tsx">
import { ref, reactive, onMounted, onBeforeMount, onBeforeUnmount, nextTick, getCurrentInstance, watch } from 'vue';
import { useRouter } from 'vue-router';
import { getConfigKey } from '@/api/management/systemManage/systemConfig';
import {
	systemOverviewList,
	failTrendList,
	businessVisitsTopNList,
	businessHealthyTopNList,
	requestTrendList,
	segmentFlowTopNList,
	segmentReqTopNList,
	segmentAlarmTopNList,
	systemAlarmTrendList,
	flowTrendList,
	busiDealTimeTrendList,
	allTrendList,
} from '@/api/bpm/cockpit/index';
import { queryBusinessOverviewListPage, exportBusinessList } from '@/api/bpm/business/business_overview';
import { querySegmentDataOverview, exportSegmentList } from '@/api/bpm/segment/segment_overview';
import { queryAppSystemOptions } from '@/api/search/searchOptions';

import * as echarts from 'echarts';
import { Pagination, A11y, Autoplay } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import { cockpitChartStyle, noDataOption } from '@/utils/defaultChartConfig';
import { parseTime, copyMsg, lineFeed, toDecimalFormate, mergeTrendData, mapFilter, formatBytes } from '@/utils/common';
import { ElTable } from 'element-plus';
import useCommonStore from '@/store/modules/common';

// 路由
const router = useRouter();
const runTrendChartId = ref<InstanceType<typeof HTMLDivElement>>();
const systemOverviewTable = ref<InstanceType<typeof ElTable>>();
const instance = getCurrentInstance();
const proxy = instance?.proxy;
//
const dialogId = ref('');
const dialogTitle = ref('');
const dialogShow = ref(false);

const dialogShow1 = ref(false);
const dialogShow2 = ref(false);

//  标题
const title = ref('');
// 图表统一样式
const chartStyle = cockpitChartStyle();
// 图表对象
const chart: anyObj = {};

// 当前轮播索引(默认第一个系统)
const currentIndex = ref(0);
// 系统总览列表数据
const systemOverviewData = ref([]);
// 高级告警信息列表数据
// const advancedAlarmInfoData = ref<any[]>([]);
// 监控中的系统数据
const systemOptions = ref<any[]>([]);

const systemSelectArr = ref<any[]>([]);

// 请求量历史峰值
let reqPeek = ref<anyObj>({});

// 流量历史峰值
let flowPeek = ref<anyObj>({});

// 加载层
const loading = reactive({
	systemOverview: false,
	failTrend: false,
	systemAlarmTrend: false,
	flowTrend: false, //流量变化趋势
	segmentFlowTopN: false,
	businessVisitTopN: false,
	segmentAlarmTopN: false,
	requestTrend: false,
	businessHealthyTopN: false,
	busiDealTimeTrend: false, //业务办理时长
});
// 请求表单对象
const formData = reactive<FormModelType>({
	systemId: undefined,
	systemIdList: [], // 选择展示的系统 5个
	startTime: undefined,
	endTime: undefined,
	currentDate: undefined,
});

// 展示流量变化趋势
const showFlowTrend = ref(true);

// 流量变化趋势数据
const flowTrendData = ref<any[]>([]);

// 业务办理时长变化趋势数据
const busiDealTimeTrendData = ref<any[]>([]);

// 展示网端流量top10
const showSegmentFlow = ref(true);

// 网端流量top10数据
const segmentFlowTopNData = ref<any[]>([]);

// 网端请求top10数据
const segmentReqTopNData = ref<any[]>([]);

// 定时器
const interval = reactive<Record<string, any>>({
	// 定时器对象
	obj: null,
	// 刷新时间(s)
	refreshTime: 10,
	// 时器倒计时时间(s)
	countDown: 10,
	// 暂停定时器标识
	pauseFlag: false,
});

// 表单实例
const businessForm = ref();
const segmentForm = ref();

// 导出按钮
const downloading2 = ref(false);
const exportDisable2 = ref(false);
const downloading3 = ref(false);
const exportDisable3 = ref(false);

// 下载开始时间、结束时间
const downloadStartTime = ref('');
const downloadEndTime = ref('');

// 表单配置
const formOptions = reactive<Record<string, FormOptionType>>({
	businessFormOptions: [
		{
			prop: 'businessCodeList',
			label: '',
			span: 24,
			type: 'select',
			placeholder: '请选择业务',
			isInitOption: false,
			api: {
				name: 'queryBusinessOptions',
				params: formData.systemId,
			},
			cascaderParam: {
				data: formData,
				key: 'systemId',
			},
			attrs: {
				multiple: true,
			},
		},
	],
	segmentFormOptions: [
		{
			prop: 'segmentIdList',
			label: '',
			span: 24,
			type: 'select',
			placeholder: '请选择网端',
			isInitOption: false,
			api: {
				name: 'querySegmentOptions',
				params: formData.systemId,
			},
			cascaderParam: {
				data: formData,
				key: 'systemId',
			},
			attrs: {
				multiple: true,
			},
		},
	],
});

// 搜索表单数据
const formDatas = reactive<Record<string, FormModelType>>({
	businessFormData: {
		businessCodeList: [],
		pageSize: 10,
		pageNum: 1,
		orderByColumn: 'healthRate',
		isAsc: 'asc',
	},
	segmentFormData: {
		segmentIdList: [],
		pageSize: 10,
		pageNum: 1,
		orderByColumn: 'healthRate',
		isAsc: 'asc',
	},
});
// 列表配置
const tableConfigs = reactive<Record<string, TableConfigType>>({
	// 业务总览列表配置
	businessOverviewConfig: {
		columns: [
			{
				label: '业务名称',
				prop: 'businessName',
				operation: [
					{
						text: undefined,
						rowKey: 'businessName',
						handler: (scope: any) => {
							router.push({
								path: '/business-monitor/monitor/business-detail/index',
								query: {
									systemId: scope.row.systemId,
									businessCode: scope.row.businessCode,
									startTime: formData.startTime,
									endTime: formData.endTime,
								},
							});
						},
					},
				],
			},
			{
				label: '访问量',
				prop: 'visitCount',
				sortable: true,
			},
			{
				label: '交易量',
				prop: 'completeVisitCount',
				sortable: true,
			},
			{
				label: '平均响应耗时',
				prop: 'serverAvgResponseTime',
				sortable: true,
				width: 130,
				formatter(row: any, val: any) {
					return toDecimalFormate(val, 'wm');
				},
			},
			{
				label: '告警访问量',
				prop: 'alarmVisitCount',
				sortable: true,
				operation: [
					{
						rowKey: 'alarmVisitCount',
						color: '#ff9a0c',
						handler: (scope: any) => {
							let data = JSON.stringify({
								systemId: scope.row.systemId,
								startTime: formData.startTime,
								endTime: formData.endTime,
								businessCodeList: [scope.row.businessCode],
								isAlarm: 1,
							});
							// isWhite('/business-monitor/monitor-query/business-list', {
							// 	data,
							// });
							router.push({
								path: '/business-monitor/monitor-query/business-list',
								query: {
									data,
								},
							});
						},
					},
				],
			},
			{
				label: '失败访问量',
				prop: 'failVisitCount',
				sortable: true,
				operation: [
					{
						rowKey: 'failVisitCount',
						color: '#fe5578',
						handler: (scope: any) => {
							let data = JSON.stringify({
								systemId: scope.row.systemId,
								startTime: formData.startTime,
								endTime: formData.endTime,
								businessCodeList: [scope.row.businessCode],
								dealState: 0,
							});
							// isWhite('/business-monitor/monitor-query/business-list', {
							// 	data,
							// });
							router.push({
								path: '/business-monitor/monitor-query/business-list',
								query: {
									data,
								},
							});
						},
					},
				],
			},

			{
				label: '成功率',
				prop: 'successRate',
				formatter(row: any, val: any) {
					return val + '%';
				},
				sortable: true,
			},
			{
				label: '健康度',
				prop: 'healthRate',
				sortable: true,
				renderXss: (row: any, val: any) => {
					if (val >= 90) {
						return <span style="color: #30B08F">{val + '%'}</span>;
					} else if (val >= 70) {
						return <span style="color: #FEC171">{val + '%'}</span>;
					} else {
						return <span style="color: #C03639">{val + '%'}</span>;
					}
				},
			},
		],
		pagination: {
			pageNum: 1,
		},
		loading: false,
		disableOrderNumber: false,
	},
	// 网端总览列表配置
	segmentOverviewConfig: {
		columns: [
			{
				label: '网端名称',
				prop: 'segmentName',
				operation: [
					{
						text: undefined,
						rowKey: 'segmentName',
						handler: (scope: any) => {
							router.push({
								path: '/business-monitor/monitor/network-detail/index',
								query: {
									systemId: formData.systemId,
									startTime: formData.startTime,
									endTime: formData.endTime,
									segmentName: scope.row.segmentName,
									segmentId: scope.row.id,
								},
							});
						},
					},
				],
			},
			{
				label: '请求量',
				prop: 'reqCount',
				sortable: true,
			},
			{
				label: '告警请求量',
				prop: 'alarmReqCount',
				sortable: true,
				operation: [
					{
						rowKey: 'alarmReqCount',
						color: '#ff9a0c',
						handler: (scope: any) => {
							router.push({
								path: '/business-monitor/monitor-analysis/basic-alarm-merging-analysis',
								query: {
									systemId: formData.systemId,
									segmentIds: scope.row.id,
									startTime: formData.startTime,
									endTime: formData.endTime,
								},
							});
						},
					},
				],
			},
			{
				label: '失败请求量',
				prop: 'failReqCount',
				sortable: true,
				operation: [
					{
						rowKey: 'failReqCount',
						color: '#fe5578',
						handler: (scope: any) => {
							router.push({
								path: '/business-monitor/monitor-analysis/basic-alarm-merging-analysis',
								query: {
									systemId: formData.systemId,
									startTime: formData.startTime,
									endTime: formData.endTime,
									segmentName: scope.row.segmentName,
									segmentId: scope.row.id,
								},
							});
						},
					},
				],
			},

			{
				label: '健康度',
				prop: 'healthRate',
				sortable: true,
				renderXss: (row: any, val: any) => {
					if (val >= 90) {
						return <span style="color: #30B08F">{val + '%'}</span>;
					} else if (val >= 70) {
						return <span style="color: #FEC171">{val + '%'}</span>;
					} else {
						return <span style="color: #C03639">{val + '%'}</span>;
					}
				},
			},
		],
		pagination: {
			pageNum: 1,
		},
		loading: false,
		disableOrderNumber: false,
	},
});

// 列表数据
const tableDatas = reactive<Record<string, TableOptionType[]>>({
	// 系统总览数据
	systemOverviewData: [],
	// 业务总览数据
	businessOverviewData: [],
	segmentOverviewData: [],
});

watch(
	() => useCommonStore().sidebar.collapse,
	() => {
		// 监听侧边栏收缩展开状态=>
		console.log('watbc------', useCommonStore().sidebar.collapse);
		setTimeout(() => {
			monirotWindowResize();
		}, 400);
	}
);

onBeforeMount(() => {
	// 指定主题为前端主题
	const bodyEl = document.getElementsByTagName('body')[0];
	bodyEl.classList.remove('theme__admin');
	bodyEl.classList.add('theme__bpm');
});
onMounted(() => {
	getSystemOptions();
	// 渲染布局
	renderLayout();
	// 初始化请求表单对象
	initFormData();
	// 初始化图表对象
	initChart();
	Promise.all([
		// 初始化刷新时间
		initRefreshTime(),
		// 获取标题等配置
		getCockpitConfig(),
	]).then(() => {
		// 渲染系统总览列表
		renderSystemOverviewList();
		// // 渲染高级告警信息列表
		// renderAdvancedAlarmInfo();
		// 监听窗口尺寸变化
		window.addEventListener('resize', monirotWindowResize);
	});
});
onBeforeUnmount(() => {
	// 跳转到其他页面相当于切换组件，确保大屏组件的定时器已经销毁
	clearInterval(interval.obj);
	// 销毁窗口事件
	window.removeEventListener('resize', monirotWindowResize);
});
// 切换流量变化趋势
const handleShowFlowTrend = () => {
	let path;

	if (!showFlowTrend.value) {
		path = '/business-monitor/monitor-query/business-overview-list';
		router.push({
			path,
			query: {
				systemId: formData.systemId,
			},
		});
	} else {
	}
};
// 切换网端流量占比
const handleShowSegmentFlow = () => {
	let path;

	if (!showSegmentFlow.value) {
		path = '/business-monitor/monitor/network-detail/index';
		router.push({
			path,
			query: {
				systemId: formData.systemId,
			},
		});
	} else {
	}
};

// 获取以启用的系统
const getSystemOptions = () => {
	queryAppSystemOptions().then((res: ApiResponse) => {
		if (res.code === 0) {
			systemOptions.value = res.data;
		}
	});
};

// 展示的系统改变
const systemSelectChange = () => {
	// console.log('systemSelectChange-------------', systemIdList);
	renderSystemOverviewList();
};

// 获取业务总览列表数据 业务访问量弹窗
const queryBusinessOverview = () => {
	if (formData.systemId === 0) {
		return;
	}
	tableConfigs.businessOverviewConfig.loading = true;
	formDatas.businessFormData.systemId = formData.systemId;
	formDatas.businessFormData.startTime = formData.startTime;
	formDatas.businessFormData.endTime = formData.endTime;
	queryBusinessOverviewListPage(formDatas.businessFormData).then((res: ApiResponse) => {
		tableConfigs.businessOverviewConfig.loading = false;
		if (res.code !== 0) {
			tableConfigs.businessOverviewConfig.loading = false;
			tableDatas.businessOverviewData = [];
			tableConfigs.businessOverviewConfig.pagination!.total = 0;
			proxy?.$message.warning(res.data.msg);
			return;
		}
		tableDatas.businessOverviewData = res.data.data;
		tableConfigs.businessOverviewConfig.pagination!.total = res.data.total;
		if (tableConfigs.businessOverviewConfig.pagination?.total! <= 0) {
			exportDisable2.value = true;
		} else {
			exportDisable2.value = false;
		}
	});
};
// 获取网端总览列表数据 网端告警弹窗
const querySegmentOverview = () => {
	if (formData.systemId === 0) {
		return;
	}
	tableConfigs.segmentOverviewConfig.loading = true;
	formDatas.segmentFormData.systemId = formData.systemId;
	formDatas.segmentFormData.startTime = formData.startTime;
	formDatas.segmentFormData.endTime = formData.endTime;
	formDatas.segmentFormData.segmentIdList = [];
	querySegmentDataOverview(formDatas.segmentFormData).then((res: ApiResponse) => {
		tableConfigs.segmentOverviewConfig.loading = false;
		if (res.code !== 0) {
			tableConfigs.segmentOverviewConfig.loading = false;
			tableDatas.segmentOverviewData = [];
			tableConfigs.segmentOverviewConfig.pagination!.total = 0;
			return;
		}
		tableDatas.segmentOverviewData = res.data.data;
		tableConfigs.segmentOverviewConfig.pagination!.total = res.data.total;

		if (tableConfigs.segmentOverviewConfig.pagination?.total! <= 0) {
			exportDisable3.value = true;
		} else {
			exportDisable3.value = false;
		}
	});
};

const openDialog1 = () => {
	// nextTick(function () {
	// 			renderRunningTrendDialog();
	// });
	dialogShow1.value = true;
	nextTick(() => {
		queryBusinessOverview();
	});
};

const openDialog2 = () => {
	// nextTick(function () {
	// 			renderRunningTrendDialog();
	// });
	dialogShow2.value = true;
	querySegmentOverview();
};

// 业务下拉项监听
const handleBusinessChange = (option: BaseOptionType, value: any) => {
	if (option.prop === 'businessCodeList') {
		queryBusinessOverview();
	}
};
// 网端下拉项监听
const handleSegmentChange = (option: BaseOptionType, value: any) => {
	if (option.prop === 'segmentIdList') {
		querySegmentOverview();
	}
};

// 导出业务总览列表数据
const handleExportBusi = () => {
	const d = JSON.parse(JSON.stringify(formDatas.businessFormData));
	d.pageNum = undefined;
	d.pageSize = undefined;
	d.startTime = downloadStartTime.value;
	d.endTime = downloadEndTime.value;
	downloading2.value = true;
	exportBusinessList(d).then((res) => {
		downloading2.value = false;
		downloadFromBlob(res, '业务概况列表').then((o: any) => {
			if (!o.flag) {
				proxy?.$message.warning(o.msg);
			}
		});
	});
};

const openDialog = (obj: number) => {
	dialogShow.value = true;
	dialogTitle.value = formData.systemName;
	nextTick(function () {
		renderRunningTrendDialog();
	});
};

// 渲染请求量、告警量、失败量趋势图弹窗
const renderRunningTrendDialog = () => {
	let line_dev = runTrendChartId.value;
	chart.runTrendChart = echarts.init(line_dev!);
	const req = {
		currentDate: formData.currentDate,
		endTime: formData.endTime,
		startTime: formData.startTime,
		systemId: formData.systemId,
	};
	chart.runTrendChart?.clear();

	allTrendList(req).then((res: ApiResponse) => {
		// 清除图表
		if (res.code !== 0 || !res.data.trendData.length) {
			noDataOption(chart.runTrendChart, {
				textStyle: { color: '#fff' },
			});
			return;
		}
		const list = res.data.trendData;
		const o: anyObj = {
			labelTimeArr: [],
			failCountArr: [],
			alarmCountArr: [],
			reqCountArr: [],
		};
		list.forEach((item: anyObj) => {
			o.labelTimeArr.push(item.labelTime);
			o.failCountArr.push(item.failVisitCount);
			o.alarmCountArr.push(item.alarmCount);
			o.reqCountArr.push(item.reqCount);
		});

		// o.labelTimeArr.pop();
		// 有数据时显示
		chart.runTrendChart.setOption({
			// 全局统一样式
			...chartStyle.common,
			// 调色盘
			color: ['#2beded', '#ff9a0c', '#fe5578'],
			// 标题
			title: {
				show: false,
			},
			// 提示框
			tooltip: {
				trigger: 'axis',
			},

			// x轴
			xAxis: {
				type: 'category',
				data: o.labelTimeArr,
				boundaryGap: false,
				...chartStyle.xAxisStyle,
				axisLabel: {
					showMaxLabel: true,
				},
			},
			// y轴
			yAxis: [
				{
					type: 'value',
					name: '请求量',
					...chartStyle.yAxisStyle,
				},
				{
					name: '失败量/告警量',
					type: 'value',

					...chartStyle.yAxisStyle,
				},
			],
			// 坐标系位置
			grid: {
				...chartStyle.grid,
			},
			// 图例
			legend: {
				data: ['请求量', '告警量', '失败量'],
				...chartStyle.legendStyle,
			},
			// 数据
			series: [
				{
					name: '请求量',
					type: 'line',
					data: o.reqCountArr,
				},

				{
					name: '告警量',
					type: 'line',
					data: o.alarmCountArr,
					yAxisIndex: 1,
				},
				{
					name: '失败量',
					type: 'line',
					data: o.failCountArr,
					yAxisIndex: 1,
				},
			],
		});
	});
};

// 渲染布局
const renderLayout = () => {
	const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
	const height = (clientHeight - 100) / 3 + 'px';
	const containers = document.getElementsByClassName('col-container');
	const containersArr: any[] = [];
	for (let i = 0; i < containers.length; i++) {
		containersArr.push(containers[i]);
	}
	containersArr.forEach((container) => {
		container.style.height = height;
	});
	(document.getElementsByClassName('footer')[0] as HTMLElement).style.height = clientHeight * 0.25 + 'px';
};
// 初始化请求表单对象
const initFormData = () => {
	// 默认当天
	const currentDate = new Date();
	formData.startTime = parseTime(currentDate.getTime(), '{y}-{m}-{d}') + ' 00:00:00';
	formData.endTime = parseTime(currentDate.getTime(), '{y}-{m}-{d} {h}:{i}:00');
	formData.currentDate = parseTime(currentDate.getTime(), '{y}{m}{d}');
	console.log('formDAta------', formData);
};
// 初始化图表对象
const initChart = () => {
	chart.failTrendChart = echarts.init(document.getElementById('failTrendChartId') as HTMLElement);
	chart.requestTrendChart = echarts.init(document.getElementById('requestTrendChartId') as HTMLElement);
	chart.systemAlarmTrendChart = echarts.init(document.getElementById('systemAlarmTrendChartId') as HTMLElement);
	chart.businessVisitTopNChart = echarts.init(document.getElementById('businessVisitTopNChartId') as HTMLElement);
	chart.segmentAlarmTopNChart = echarts.init(document.getElementById('segmentAlarmTopNChartId') as HTMLElement);
	chart.businessHealthyTopNChart = echarts.init(document.getElementById('businessHealthyTopNChartId') as HTMLElement);
};

const getCockpitConfig = () => {
	getConfigKey('busiess.cockpit.trend').then((res: ApiResponse) => {
		let str = res.data as string;
		showFlowTrend.value = str === 'flow';
		console.log('showFlowTrend', showFlowTrend.value);
		nextTick(() => {
			if (showFlowTrend.value) {
				chart.flowTrendChart = echarts.init(document.getElementById('flowTrendChartId') as HTMLElement);
			} else {
				chart.busiDealTimeTrendChart = echarts.init(document.getElementById('busiDealTimeTrendChartId') as HTMLElement);
				console.log('chart.busiDealTimeTrendChart------ ', chart.busiDealTimeTrendChart);
			}
		});
	});
	getConfigKey('busiess.cockpit.pie').then((res: ApiResponse) => {
		let str = res.data as string;
		showSegmentFlow.value = str === 'flow';
		nextTick(() => {
			if (showSegmentFlow.value) {
				chart.segmentFlowTopNChart = echarts.init(document.getElementById('segmentFlowTopNChartId') as HTMLElement);
			} else {
				chart.segmentReqTopNChart = echarts.init(document.getElementById('segmentReqTopNChartId') as HTMLElement);
			}
		});
	});
	return new Promise((resolve, reject) => {
		getConfigKey('sys.project.show.name').then((res: ApiResponse) => {
			title.value = res.data as string;
			resolve('render title success!');
		});
	});
};

// 初始化刷新时间
const initRefreshTime = () => {
	return new Promise((resolve, reject) => {
		getConfigKey('home.cockpit.refreshTime').then((res: ApiResponse) => {
			interval.refreshTime = parseInt(res.data);
			interval.countDown = interval.refreshTime;
			resolve('init refreshTime success!');
		});
	});
};
// 渲染标题
const getConfig = () => {};
// 监听窗口尺寸变化
const monirotWindowResize = () => {
	// 重新渲染布局
	renderLayout();
	caclChartContainer();
};

// 计算设置图表宽高
function caclChartContainer() {
	setTimeout(() => {
		for (let c in chart) {
			console.log('chart[c]._dom.clientWidth', chart[c]._dom.clientWidth);
			chart[c] &&
				chart[c].resize({
					width: chart[c]._dom.clientWidth,
				});
		}
	}, 50);
}
// 渲染系统总览列表
const renderSystemOverviewList = () => {
	loading.systemOverview = true;
	systemOverviewList({
		startTime: formData.startTime,
		endTime: formData.endTime,
		currentDate: formData.currentDate,
		systemIdList: formData.systemIdList,
	}).then((res: ApiResponse) => {
		loading.systemOverview = false;

		if (res.code !== 0) {
			return;
		}

		systemOverviewData.value = res.data;

		// 设置系统id集合，先清空
		formData.systemIdList = [];
		res.data.forEach((r: any, index: number) => {
			r.index = index;
			r.systemId += '';
			formData.systemIdList.push(r.systemId);
		});
		console.log('systemOverviewList', currentIndex.value);
		// 选中当前轮播索引行
		if (systemOverviewData.value.length > 0 && systemOverviewData.value.length >= currentIndex.value) {
			// 当前渲染数组的长度大于等于当前下标的长度，设置表格为当前下标所在行；则切换当前系统，重新渲染页面
			systemOverviewTable.value?.setCurrentRow(systemOverviewData.value[currentIndex.value]);
			rowClickHandler(systemOverviewData.value[currentIndex.value]);
		} else {
			//
			rowClickHandler(null);
		}
		// 启动定时器
		startTimeInterval();
	});
};
// 渲染失败量趋势图
const queryFailTrendData = () => {
	loading.failTrend = true;

	const req = {
		currentDate: formData.currentDate,
		endTime: formData.endTime,
		startTime: formData.startTime,
		systemId: formData.systemId,
		systemIdList: formData.systemIdList,
	};
	failTrendList(req).then((res: ApiResponse) => {
		loading.failTrend = false;

		// 清除图表
		chart.failTrendChart.clear();
		if (res.code !== 0) {
			proxy?.$message.warning(res.msg);

			noDataOption(chart.failTrendChart, {
				textStyle: { color: '#fff' },
			});
			return;
		}

		if (res.data.trendData.length === 0) {
			noDataOption(chart.failTrendChart, {
				textStyle: { color: '#fff' },
			});
			return;
		}
		renderFailTrendChart(res.data.trendData, res.data.trendStartTime, res.data.trendEndTime);
	});
};
//当五小时查无数据 请求一天的总量
const renderFailTrendChart4AllData = () => {
	const req = {
		currentDate: formData.currentDate,
		endTime: formData.endTime,
		startTime: formData.startTime,
		systemId: formData.systemId,
		systemIdList: formData.systemIdList,
	};
	loading.failTrend = true;

	failTrendList(req).then((res: ApiResponse) => {
		loading.failTrend = false;

		// 清除图表
		chart.failTrendChart.clear();
		if (res.code !== 0) {
			proxy?.$message.warning(res.msg);

			noDataOption(chart.failTrendChart, {
				textStyle: { color: '#fff' },
			});
			return;
		}

		if (res.data.trendData.length === 0) {
			noDataOption(chart.failTrendChart, {
				textStyle: { color: '#fff' },
			});
			return;
		}
		renderFailTrendChart(res.data.trendData, res.data.trendStartTime, res.data.trendEndTime);
	});
};

// 渲染失败量趋势图chart 11view
const renderFailTrendChart = (obj: any, startTime: any, endTime: any) => {
	// const list = mergeTrendData(config);

	// const o = {
	// 	labelTimeArr: list.resLabelTimeArr,
	// 	failTrendDay: list.resFieldMap.failTrendDay,
	// 	failTrendWeek: list.resFieldMap.failTrendWeek,
	// 	failTrendMonth: list.resFieldMap.failTrendMonth,
	// };
	const o: anyObj = {
		labelTimeArr: [],
		failTrendDay: [],
		failTrendWeek: mapFilter(obj.failTrendWeek, 'failVisitCount'),
		failTrendMonth: mapFilter(obj.failTrendMonth, 'failVisitCount'),
	};
	obj.failTrendDay.forEach((item: anyObj) => {
		o.labelTimeArr.push(item.labelTime.substr(0, 5));
		o.failTrendDay.push(item.failVisitCount);
	});
	// 有数据时显示
	chart.failTrendChart.setOption({
		// 全局统一样式
		...chartStyle.common,
		// 调色盘
		// color: ['#e93074', '#2beded', '#6d51f5', '#fe5578', '#ff7d4f'],
		// 标题
		title: {
			show: false,
		},
		// 提示框
		tooltip: {
			trigger: 'axis',
		},
		legend: {
			data: ['今日', '周平均', '月平均'],
			...chartStyle.legendStyle,
		},
		// x轴
		xAxis: {
			type: 'category',
			data: o.labelTimeArr,
			boundaryGap: false,
			...chartStyle.xAxisStyle,
			axisLabel: {
				showMaxLabel: true,
			},
		},
		// y轴
		yAxis: {
			type: 'value',
			...chartStyle.yAxisStyle,
		},
		// 坐标系位置
		grid: {
			...chartStyle.grid,
		},
		// 数据
		series: [
			{
				name: '今日',
				type: 'line',
				lineStyle: {
					width: 2,
				},
				data: o.failTrendDay,
				symbolSize: 5,
			},
			{
				name: '周平均',
				type: 'line',
				lineStyle: {
					width: 2,
				},
				data: o.failTrendWeek,
				symbolSize: 5,
			},
			{
				name: '月平均',
				type: 'line',
				lineStyle: {
					width: 2,
				},
				data: o.failTrendMonth,
				symbolSize: 5,
			},
		],
	});
};

// 渲染告警量趋势图
const querySystemAlarmTrendChart = () => {
	loading.systemAlarmTrend = true;

	const req = {
		currentDate: formData.currentDate,
		endTime: formData.endTime,
		startTime: formData.startTime,
		systemId: formData.systemId,
		systemIdList: formData.systemIdList,
	};
	// 清除图表
	chart.systemAlarmTrendChart?.clear();
	systemAlarmTrendList(req).then((res: ApiResponse) => {
		loading.systemAlarmTrend = false;
		if (res.code !== 0 || !res.data.trendData) {
			noDataOption(chart.systemAlarmTrendChart, {
				textStyle: { color: '#fff', formatter: '暂无告警数据' },
			});
			return;
		}
		renderSystemAlarmTrendChart(res.data.trendData, res.data.trendStartTime, res.data.trendEndTime);
	});
};
//当五小时查无数据 请求一天的总量
const renderSystemAlarmTrendChart4AllData = () => {
	const req = {
		currentDate: formData.currentDate,
		endTime: formData.endTime,
		startTime: formData.startTime,
		systemId: formData.systemId,
		systemIdList: formData.systemIdList,
	};

	systemAlarmTrendList(req).then((res: ApiResponse) => {
		loading.systemAlarmTrend = false;

		// 清除图表
		chart.systemAlarmTrendChart.clear();
		if (res.code !== 0) {
			proxy?.$message.warning(res.msg);

			noDataOption(chart.systemAlarmTrendChart, {
				textStyle: { color: '#fff' },
			});
			return;
		}
		if (res.data.trendData.length === 0) {
			noDataOption(chart.systemAlarmTrendChart, {
				textStyle: { color: '#fff', formatter: '暂无告警数据' },
			});
			return;
		}

		renderSystemAlarmTrendChart(res.data.trendData, res.data.trendStartTime, res.data.trendEndTime);
	});
};

// 渲染告警量趋势图 chart view
const renderSystemAlarmTrendChart = (obj: any, startTime: any, endTime: any) => {
	const o: anyObj = {
		labelTimeArr: [],
		systemAlarmTrendDay: [],
		systemAlarmTrendWeek: mapFilter(obj.systemAlarmTrendWeek, 'alarmCount'),
		systemAlarmTrendMonth: mapFilter(obj.systemAlarmTrendMonth, 'alarmCount'),
	};
	obj.systemAlarmTrendDay.forEach((item: anyObj) => {
		o.labelTimeArr.push(item.labelTime);
		o.systemAlarmTrendDay.push(item.alarmCount);
	});
	// debugger;

	// o.labelTimeArr.pop();

	chart.systemAlarmTrendChart.setOption({
		// 全局统一样式
		...chartStyle.common,
		// 调色盘

		// 标题
		title: {
			show: false,
		},
		// 提示框
		tooltip: {
			trigger: 'axis',
		},
		// 图例
		legend: {
			data: ['今日', '周平均', '月平均'],
			...chartStyle.legendStyle,
		},
		// x轴
		xAxis: {
			type: 'category',
			data: o.labelTimeArr,
			boundaryGap: false,
			...chartStyle.xAxisStyle,
			axisLabel: {
				showMaxLabel: true,
			},
		},
		// y轴
		yAxis: {
			type: 'value',
			...chartStyle.yAxisStyle,
		},
		// 坐标系位置
		grid: {
			...chartStyle.grid,
		},
		// 数据
		series: [
			{
				name: '今日',
				type: 'line',
				lineStyle: {
					width: 2,
				},
				data: o.systemAlarmTrendDay,
				symbolSize: 5,
			},
			{
				name: '周平均',
				type: 'line',
				lineStyle: {
					width: 2,
				},
				data: o.systemAlarmTrendWeek,
				symbolSize: 5,
			},
			{
				name: '月平均',
				type: 'line',
				lineStyle: {
					width: 2,
				},
				data: o.systemAlarmTrendMonth,
				symbolSize: 5,
			},
		],
	});
};

// 渲染请求量趋势图
const queryRequestTrendData = () => {
	loading.requestTrend = true;
	const req = {
		currentDate: formData.currentDate,
		endTime: formData.endTime,
		startTime: formData.startTime,
		systemId: formData.systemId,
		systemIdList: formData.systemIdList,
	};
	// 清空数据
	chart.requestTrendChart?.clear();

	requestTrendList(req).then((res: ApiResponse) => {
		loading.requestTrend = false;
		if (res.code !== 0 || !res.data.trendData) {
			proxy?.$message.warning(res.msg);
			noDataOption(chart.requestTrendChart, {
				textStyle: { color: '#fff' },
			});
			return;
		}
		reqPeek.value = res.data.trendData?.requestPeak;

		renderRequestTrendChart(res.data.trendData, res.data.trendStartTime, res.data.trendEndTime, res.data.lastShow);
	});
};

//请求量趋势图 chart view
const renderRequestTrendChart = (obj: any, startTime: any, endTime: any, isLastShow: any) => {
	if (obj.length === 0) {
		return;
	}
	// const config = {
	// 	data: obj,
	// 	startTime: startTime,
	// 	endTime: endTime,
	// 	fields: [{ name: 'requestTrendDay' }, { name: 'requestTrendVoWeek' }, { name: 'requestTrendVoMonth' }],
	// 	scale: 10,
	// 	cycleTimeKey: 'labelTime',
	// 	isLastShow: true,
	// };
	// const list = mergeTrendData(config);
	// const o = {
	// 	labelTimeArr: list.resLabelTimeArr,
	// 	requestTrendDay: list.resFieldMap.requestTrendDay,
	// 	requestTrendVoWeek: list.resFieldMap.requestTrendVoWeek,
	// 	requestTrendVoMonth: list.resFieldMap.requestTrendVoMonth,
	// };
	const o: anyObj = {
		labelTimeArr: [],
		requestTrendDay: [],
		requestTrendVoWeek: mapFilter(obj.requestTrendVoWeek, 'reqCount'),
		requestTrendVoMonth: mapFilter(obj.requestTrendVoMonth, 'reqCount'),
	};
	obj.requestTrendDay.forEach((item: anyObj) => {
		o.labelTimeArr.push(item.labelTime);
		o.requestTrendDay.push(item.reqCount);
	});
	// debugger;

	// 有数据时显示
	chart.requestTrendChart.setOption({
		// 全局统一样式
		...chartStyle.common,
		// 标题
		title: {
			show: false,
		},
		// 提示框
		tooltip: {
			trigger: 'axis',
		},
		// 图例
		legend: {
			data: ['今日', '周平均', '月平均'],
			...chartStyle.legendStyle,
		},
		// x轴
		xAxis: {
			type: 'category',
			data: o.labelTimeArr,
			boundaryGap: false,
			...chartStyle.xAxisStyle,
			axisLabel: {
				showMaxLabel: true,
			},
		},
		// y轴
		yAxis: {
			type: 'value',
			...chartStyle.yAxisStyle,
		},
		// 坐标系位置
		grid: {
			...chartStyle.grid,
		},
		// 数据
		series: [
			{
				name: '今日',
				type: 'line',
				lineStyle: {
					width: 2,
				},
				data: o.requestTrendDay,
				symbolSize: 5,
			},
			{
				name: '周平均',
				type: 'line',
				lineStyle: {
					width: 2,
				},
				data: o.requestTrendVoWeek,
				symbolSize: 5,
			},
			{
				name: '月平均',
				type: 'line',
				lineStyle: {
					width: 2,
				},
				data: o.requestTrendVoMonth,
				symbolSize: 5,
			},
		],
	});
};

// 流量变化趋势数据
const queryFlowTrendData = () => {
	loading.flowTrend = true;
	const req = {
		currentDate: formData.currentDate,
		endTime: formData.endTime,
		startTime: formData.startTime,
		systemId: formData.systemId,
		systemIdList: formData.systemIdList,
	};
	chart.flowTrendChart?.clear();
	flowTrendList(req).then((res: ApiResponse) => {
		loading.flowTrend = false;

		// 清空数据
		if (res.code !== 0) {
			proxy?.$message.warning(res.msg);
			noDataOption(chart.flowTrendChart, {
				textStyle: { color: '#fff' },
			});
			return;
		}

		if (showFlowTrend.value) {
			// 展示流量趋势的时候才渲染
			renderflowTrendChart(res.data.trendData);
		}
		// 将数据存起来，切换的时候用
		flowTrendData.value = res.data.trendData;
		flowPeek.value = res.data.trendData?.requestPeak || {};
	});
};

//流量变化趋势图 chart view
const renderflowTrendChart = (obj: any) => {
	const o: anyObj = {
		labelTimeArr: [],
		flowTrendDay: [],
		flowTrendWeek: mapFilter(obj.flowTrendWeek, 'reqCount'),
		flowTrendMonth: mapFilter(obj.flowTrendMonth, 'reqCount'),
	};
	obj.flowTrendDay.forEach((item: anyObj) => {
		o.labelTimeArr.push(item.labelTime.substr(0, 5));
		o.flowTrendDay.push(item.reqCount);
	});

	// debugger;

	// 有数据时显示
	chart.flowTrendChart.setOption({
		// 全局统一样式
		...chartStyle.common,
		// 调色盘
		// color: ['#e93074', '#2beded', '#6d51f5', '#fe5578', '#ff7d4f'],
		// 标题
		title: {
			show: false,
		},
		// 提示框
		tooltip: {
			trigger: 'axis',
		},
		// 图例
		legend: {
			data: ['今日', '周平均', '月平均'],
			...chartStyle.legendStyle,
		},
		// x轴
		xAxis: {
			type: 'category',
			data: o.labelTimeArr,
			boundaryGap: false,
			...chartStyle.xAxisStyle,
			axisLabel: {
				showMaxLabel: true,
			},
			// splitNumber: 5,
			minInterval: 1,
		},
		// y轴
		yAxis: {
			type: 'value',
			...chartStyle.yAxisStyle,
			name: '单位：（M）',
		},
		// 坐标系位置
		grid: {
			...chartStyle.grid,
		},
		// 数据
		series: [
			{
				name: '今日',
				type: 'line',
				lineStyle: {
					width: 2,
				},
				data: o.flowTrendDay,
				symbolSize: 5,
			},
			{
				name: '周平均',
				type: 'line',
				lineStyle: {
					width: 2,
				},
				data: o.flowTrendWeek,
				symbolSize: 5,
			},
			{
				name: '月平均',
				type: 'line',
				lineStyle: {
					width: 2,
				},
				data: o.flowTrendMonth,
				symbolSize: 5,
			},
		],
	});
};

// 业务办理时长趋势数据
const queryBusiDealTimeTrendData = () => {
	loading.flowTrend = true;
	const req = {
		currentDate: formData.currentDate,
		endTime: formData.endTime,
		startTime: formData.startTime,
		systemId: formData.systemId,
		systemIdList: formData.systemIdList,
	};
	chart.busiDealTimeTrendChart?.clear();
	busiDealTimeTrendList(req).then((res: ApiResponse) => {
		loading.flowTrend = false;
		// 清空数据

		if (res.code !== 0 || res.data.trendData.length === 0) {
			noDataOption(chart.busiDealTimeTrendChart, {
				textStyle: { color: '#fff' },
			});
			return;
		}

		if (!showFlowTrend.value) {
			// 不展示流量趋势的时候才渲染
			renderBusiDealTimeTrendChart(res.data.trendData);
		}
		// 将数据存起来，切换的时候用
		busiDealTimeTrendData.value = res.data.trendData;
	});
};

//业务办理时长趋图 chart view
const renderBusiDealTimeTrendChart = (obj: any) => {
	const o: anyObj = {
		labelTimeArr: [],
		busHandleTrendDay: mapFilter(obj.busHandleTrendDay, 'dealTime'),
		busHandleTrendWeek: mapFilter(obj.busHandleTrendWeek, 'dealTime'),
		busHandleTrendMonth: [],
	};
	obj.busHandleTrendMonth.forEach((item: anyObj) => {
		o.labelTimeArr.push(item.labelTime);
		o.busHandleTrendMonth.push(item.dealTime);
	});
	if (!o.labelTimeArr.length) {
		noDataOption(chart.busiDealTimeTrendChart, {
			textStyle: { color: '#fff' },
		});
		return;
	}

	// debugger;

	// 有数据时显示
	chart.busiDealTimeTrendChart.setOption({
		// 全局统一样式
		...chartStyle.common,
		// 调色盘
		// color: ['#e93074', '#2beded', '#6d51f5', '#fe5578', '#ff7d4f'],
		// 标题
		title: {
			show: false,
		},
		// 提示框
		tooltip: {
			trigger: 'axis',
		},
		// 图例
		legend: {
			data: ['今日', '周平均', '月平均'],
			...chartStyle.legendStyle,
		},
		// x轴
		xAxis: {
			type: 'category',
			data: o.labelTimeArr,
			boundaryGap: false,
			...chartStyle.xAxisStyle,
			axisLabel: {
				showMaxLabel: true,
			},
		},
		// y轴
		yAxis: {
			type: 'value',
			...chartStyle.yAxisStyle,
			name: '单位：（毫秒）',
		},
		// 坐标系位置
		grid: {
			...chartStyle.grid,
		},
		// 数据
		series: [
			{
				name: '今日',
				type: 'line',
				lineStyle: {
					width: 2,
				},
				data: o.busHandleTrendDay,
				symbolSize: 5,
			},
			{
				name: '周平均',
				type: 'line',
				lineStyle: {
					width: 2,
				},
				data: o.busHandleTrendWeek,
				symbolSize: 5,
			},
			{
				name: '月平均',
				type: 'line',
				lineStyle: {
					width: 2,
				},
				data: o.busHandleTrendMonth,
				symbolSize: 5,
			},
		],
	});
};

// 渲染业务健康度
const queryBusinessHealthyTopNData = () => {
	loading.businessHealthyTopN = true;
	businessHealthyTopNList(formData).then((res: ApiResponse) => {
		loading.businessHealthyTopN = false;

		// 清除图表
		//   chart.businessHealthyTopNChart.clear();
		if (res.code !== 0) {
			proxy?.$message.warning(res.msg);
			// chart.businessHealthyTopNChart.setOption(chartStyle.noDataOption);
			noDataOption(chart.businessHealthyTopNChart, {
				textStyle: { color: '#fff' },
			});
			return;
		}

		const series: any[] = [];
		let xOffset = 15;
		res.data.forEach((r: any) => {
			series.push({
				name: r.businessName,
				type: 'pie',
				radius: ['50%', '65%'],
				center: [xOffset + '%', '50%'],
				avoidLabelOverlap: false,
				hoverAnimation: false,
				label: {
					show: false,
					position: 'center',
				},
				emphasis: {
					label: {
						show: true,
						fontSize: 14,
						fontFamily: 'PingFang SC-Medium',
						color: '#2beded',
						// formatter: '{a}\n{c}%'
						formatter(params: any) {
							let line = lineFeed(params.seriesName, 5, 2, 1);
							if (line.indexOf('\n') === -1) {
								line += '\n';
							}
							return line + '\n' + params.value + '%';
						},
					},
				},
				labelLine: {
					show: false,
				},
				data: [
					{
						value: r.healthRatio,
						name: '健康度',
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{ offset: 0, color: '#63B0E5' },
									{ offset: 0.2, color: '#84E1F4' },
									{ offset: 1, color: '#4481D7' },
								]),
							},
						},
					},
					{
						value: (100 - r.healthRatio).toFixed(2),
						name: '告警度',
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{ offset: 0, color: '#345775' },
									{ offset: 0.2, color: '#345775' },
									{ offset: 1, color: '#345775' },
								]),
							},
						},
					},
				],
			});
			xOffset += 17;
		});

		// 无数据时显示
		if (res.data.length <= 0) {
			// chart.businessHealthyTopNChart.setOption(chartStyle.noDataOption);
			noDataOption(chart.businessHealthyTopNChart, {
				textStyle: { color: '#fff' },
			});
			return;
		}
		// 有数据时显示
		chart.businessHealthyTopNChart.setOption({
			// 全局统一样式
			...chartStyle.common,
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b} : {c} ({d}%)',
			},
			// 坐标系位置
			series: series,
		});
		// 默认展示健康度图例
		chart.businessHealthyTopNChart.dispatchAction({
			type: 'highlight',
			seriesIndex: [0, 1, 2, 3, 4],
			dataIndex: 0,
		});
		chart.businessHealthyTopNChart.on('mouseover', function (e) {
			chart.businessHealthyTopNChart.dispatchAction({
				type: 'highlight',
				seriesIndex: [0, 1, 2, 3, 4],
				dataIndex: 0,
			});
			chart.businessHealthyTopNChart.dispatchAction({
				type: 'downplay',
				seriesIndex: [0, 1, 2, 3, 4],
				dataIndex: 1,
			});
		});
	});
};

// 渲染业务访问量TOP10
const queryBusinessVisitTopNData = () => {
	loading.businessVisitTopN = true;
	businessVisitsTopNList(formData).then((res: ApiResponse) => {
		loading.businessVisitTopN = false;

		// 清空数据
		chart.businessVisitTopNChart.clear();
		if (res.code !== 0) {
			proxy?.$message.warning(res.msg);
			// chart.businessVisitTopNChart.setOption(chartStyle.noDataOption);
			noDataOption(chart.businessVisitTopNChart, {
				textStyle: { color: '#fff' },
			});
			return;
		}

		// 渲染系统业务访问量TOP10
		const o: anyObj = {
			businessNameArr: [],
			visitCountArr: [],
		};
		res.data.forEach((r: any) => {
			o.businessNameArr.push(r.businessName);
			o.visitCountArr.push(r.visitCount);
		});

		// 无数据时显示
		if (res.data.length <= 0) {
			// chart.businessVisitTopNChart.setOption(chartStyle.noDataOption);
			noDataOption(chart.businessVisitTopNChart, {
				textStyle: { color: '#fff' },
			});
			return;
		}
		// 根据业务名称个数进行换行处理时每行的文本数
		const labelCount = 3 + (5 - Math.ceil(o.businessNameArr.length / 2));
		// 有数据时显示
		chart.businessVisitTopNChart.setOption({
			// 全局统一样式
			...chartStyle.common,
			// 调色盘
			color: ['#2beded'],
			// 标题
			title: {
				show: false,
			},
			// 提示框
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow',
				},
			},
			// x轴
			xAxis: {
				type: 'category',
				data: o.businessNameArr,
				axisLabel: {
					// 换行处理
					formatter(label: string) {
						return lineFeed(label, labelCount, 2, 1);
					},
					interval: 0,
					rotate: 0,
				},
				...chartStyle.xAxisStyle,
			},
			// y轴
			yAxis: {
				type: 'value',
				...chartStyle.yAxisStyle,
			},
			// 坐标系位置
			grid: {
				...chartStyle.grid,
			},
			// 数据
			series: [
				{
					name: '业务访问量',
					type: 'bar',
					barWidth: 15,
					data: o.visitCountArr,
					itemStyle: {
						normal: {
							label: {
								show: true,
								position: 'top',
							},
						},
					},
				},
			],
		});
	});
};
// 渲染网端告警TOP10
const querySegmentAlarmTopNData = () => {
	loading.segmentAlarmTopN = true;
	segmentAlarmTopNList(formData).then((res: ApiResponse) => {
		loading.segmentAlarmTopN = false;

		// 清空数据
		chart.segmentAlarmTopNChart.clear();
		if (res.code !== 0) {
			proxy?.$message.warning(res.msg);
			// chart.segmentAlarmTopNChart.setOption(chartStyle.noDataOption);
			noDataOption(chart.segmentAlarmTopNChart, {
				textStyle: { color: '#fff' },
			});
			return;
		}

		// 渲染系统网端告警TOP10
		const o: anyObj = {
			segmentNameArr: [],
			alarmCountArr: [],
		};
		res.data.forEach((r: any) => {
			o.segmentNameArr.push(r.segmentName);
			o.alarmCountArr.push(r.alarmCount);
		});

		// 无数据时显示
		if (res.data.length <= 0) {
			// chart.segmentAlarmTopNChart.setOption(chartStyle.noDataOption);
			noDataOption(chart.segmentAlarmTopNChart, {
				textStyle: { color: '#fff', formatter: '暂无告警数据~' },
			});
			return;
		}
		// 根据网端名称个数进行换行处理时每行的文本数
		const labelCount = 3 + (5 - Math.ceil(o.segmentNameArr.length / 2));
		// 有数据时显示
		chart.segmentAlarmTopNChart.setOption({
			// 全局统一样式
			...chartStyle.common,
			// 调色盘
			// color: ['#1875f0'],
			// 标题
			title: {
				show: false,
			},
			// 提示框
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow',
				},
			},
			// x轴
			xAxis: {
				type: 'category',
				data: o.segmentNameArr,
				axisLabel: {
					// 换行处理
					formatter(label: string) {
						return lineFeed(label, labelCount, 2, 1);
					},
					interval: 0,
					rotate: 0,
				},
				...chartStyle.xAxisStyle,
			},
			// y轴
			yAxis: {
				type: 'value',
				...chartStyle.yAxisStyle,
			},
			// 坐标系位置
			grid: {
				...chartStyle.grid,
			},
			// 数据
			series: [
				{
					name: '告警量',
					type: 'bar',
					barWidth: 15,
					data: o.alarmCountArr,
					itemStyle: {
						normal: {
							label: {
								show: true,
								position: 'top',
							},
						},
					},
				},
			],
		});
	});
};

// 渲染网端流量TOP10占比
const querySegmentFlowTopNData = () => {
	loading.segmentFlowTopN = true;
	// 清空数据
	chart.segmentFlowTopNChart?.clear();
	segmentFlowTopNList({
		currentDate: formData.currentDate,
		endTime: formData.endTime,
		startTime: formData.startTime,
		systemId: formData.systemId,
		systemIdList: formData.systemIdList,
	}).then((res: ApiResponse) => {
		loading.segmentFlowTopN = false;
		let arr = res.data;
		if (!arr || arr.length === 0) {
			noDataOption(chart.segmentFlowTopNChart, {
				textStyle: { color: '#fff' },
			});
			return;
		}
		if (showSegmentFlow.value) {
			// 展示流量趋势的时候才渲染
			renderSegmentFlowTopNChart(res.data);
		}
		// 将数据存起来，切换的时候用
		segmentFlowTopNData.value = res.data;
	});
};

const renderSegmentFlowTopNChart = (arr: any[]) => {
	// 无数据时显示
	if (!arr || arr.length === 0) {
		noDataOption(chart.segmentFlowTopNChart, {
			textStyle: { color: '#fff' },
		});
		return;
	}
	let seriesData: any[] = [];
	arr.forEach((item: anyObj) => {
		seriesData.push({
			name: item.segmentName,
			value: item.totalBytes || 0,
		});
	});
	// 有数据时显示
	chart.segmentFlowTopNChart.setOption({
		// 全局统一样式
		...chartStyle.common,
		// 标题
		title: {
			show: false,
		},
		// 调色盘
		// color: ['#e93074', '#2beded', '#6d51f5', '#fe5578', '#ff7d4f'],
		// 提示框
		tooltip: {
			trigger: 'item',
		},
		// 数据
		series: [
			{
				// name: '',
				type: 'pie',
				radius: ['40%', '70%'],
				avoidLabelOverlap: false,
				label: {
					formatter(data: anyObj) {
						console.log('formater-------', data);
						let value = formatBytes(data.value);
						let str = `${data.name}:\n${value}，${data.percent}%`;
						return str;
					},
				},
				emphasis: {
					label: {
						show: true,
						fontSize: 20,
						fontWeight: 'bold',
					},
				},
				data: seriesData,
			},
		],
	});
};

// 渲染网端请求量TOP10占比
const querySegmentReqTopNData = () => {
	loading.segmentFlowTopN = true;
	// 清空数据
	chart.segmentReqTopNChart?.clear();
	segmentReqTopNList({
		currentDate: formData.currentDate,
		endTime: formData.endTime,
		startTime: formData.startTime,
		systemId: formData.systemId,
		systemIdList: formData.systemIdList,
	}).then((res: ApiResponse) => {
		loading.segmentFlowTopN = false;

		if (!showSegmentFlow.value) {
			// 不展示流量趋势的时候才渲染
			renderSegmentReqTopNChart(res.data);
		}
		// 将数据存起来，切换的时候用
		segmentReqTopNData.value = res.data;
	});
};

const renderSegmentReqTopNChart = (arr: any[]) => {
	let seriesData: any[] = [];
	// 无数据时显示
	if (!arr || arr.length === 0) {
		// chart.segmentFlowTopNChart.setOption(chartStyle.noDataOption);\
		noDataOption(chart.segmentReqTopNChart, {
			textStyle: { color: '#fff' },
		});
		return;
	}
	arr.forEach((r: anyObj) => {
		seriesData.push({
			name: r.segmentName,
			value: r.reqCount,
		});
	});
	// 有数据时显示
	chart.segmentReqTopNChart.setOption({
		// 全局统一样式
		...chartStyle.common,
		// 标题
		title: {
			show: false,
		},
		// 调色盘
		// color: ['#e93074', '#2beded', '#6d51f5', '#fe5578', '#ff7d4f'],
		// 提示框
		tooltip: {
			trigger: 'item',
		},
		// 数据
		series: [
			{
				type: 'pie',
				radius: ['40%', '70%'],
				avoidLabelOverlap: false,
				label: {
					formatter(data: any) {
						let str = `${data.name}:\n${data.value}次，${data.percent}%`;
						return str;
					},
				},
				emphasis: {
					label: {
						show: true,
						fontSize: 20,
						fontWeight: 'bold',
					},
				},
				data: seriesData,
			},
		],
	});
};

// 选择一条系统
const rowClickHandler = (row?: any, column?: any, event?: any) => {
	// 设置系统id
	if (row) {
		formData.systemId = row.systemId;
		formData.systemName = row.systemName;
	} else {
		// row为空代表系统总览数据长度小于当前下标currentIndex，
		formData.systemId = -1;
	}
	console.log('row.index', row.index);
	console.log('currentIndex.value', currentIndex.value);

	// 如果是用户点击行
	if (column && event) {
		// 如果点击的行与当前展示的行索引一致，切换暂停/开始倒计时
		if (row.index === currentIndex.value) {
			togglePauseSwiper();
			return;
		}
		// 重新计时
		interval.countDown = interval.refreshTime;
		// 轮播系统
		swiperSystem(row.index);
		return;
	}
	// 清空所有chart
	clearAllChart();
	// 渲染失败量趋势图
	queryFailTrendData();

	// 渲染告警量趋势图
	querySystemAlarmTrendChart();

	// 渲染业务健康度
	queryBusinessHealthyTopNData();

	// 请求量趋势
	queryRequestTrendData();

	// 流量变化趋势
	queryFlowTrendData();

	// 业务办理时长变化趋势
	queryBusiDealTimeTrendData();

	// 业务访问量TOP10
	queryBusinessVisitTopNData();

	// 渲染系统网端告警TOP10
	querySegmentAlarmTopNData();

	// 渲染系统网端流量TOP10占比
	querySegmentFlowTopNData();

	// 渲染系统网端请求TOP10占比
	querySegmentReqTopNData();
};

const clearAllChart = () => {
	for (let key in chart) {
		if (chart[key]) {
			chart[key].clear();
		}
	}
};
// 启动定时器
const startTimeInterval = () => {
	// 先清除定时器
	clearInterval(interval.obj);
	// 开启倒计时
	interval.pauseFlag = false;
	// 设置新的定时器
	interval.obj = setInterval(function () {
		if (!interval.pauseFlag) {
			// 如果没有暂停，倒计时减1
			interval.countDown -= 1;
			// 判断倒计时是否结束
			if (interval.countDown <= 0) {
				// 轮播系统
				swiperSystem();
				// 重新计时
				interval.countDown = interval.refreshTime;
			}
		}
	}, 1000);
};
// 轮播到指定索引处的系统(没指定默认下一个系统)
const swiperSystem = (index?: number) => {
	if (index !== undefined && index >= 0) {
		// 指定轮播的索引
		currentIndex.value = index;
	} else if (currentIndex.value >= systemOverviewData.value.length - 1) {
		// 从头轮播
		currentIndex.value = 0;
	} else {
		currentIndex.value++;
	}
	// 初始化请求表单对象
	initFormData();
	// 渲染系统总览列表
	renderSystemOverviewList();
	// // 渲染高级告警信息列表
	// renderAdvancedAlarmInfo();
};
// 切换暂停/开始倒计时
const togglePauseSwiper = () => {
	interval.pauseFlag = !interval.pauseFlag;
};
// 下钻页面
const jumpPage = (sign: any) => {
	let ro;
	const currentQuery: anyObj = {
		startTime: formData.startTime,
		endTime: formData.endTime,
	};
	if (formData.systemId > 0) {
		currentQuery.systemId = formData.systemId;
	}

	switch (sign) {
		case 1:
			// 点击标题跳转至首页，首页显示的系统为当前轮播的系统
			ro = router.resolve({
				path: '/business-monitor/home/index',
				query: {
					systemId: currentQuery.systemId,
				},
			});
			break;
		case 2:
			// 点击系统总览跳转至全系统IT路径图
			ro = router.resolve({
				path: '/business-monitor/all-it-road',
			});
			break;
		case 3:
			// 点击业务健康度跳转至业务查询
			ro = router.resolve({
				path: '/business-monitor/monitor-query/business-overview-list',
				query: currentQuery,
			});
			break;
		case 4:
			// 点击系统网端流量TOP10占比跳转至首页，首页显示的系统为当前轮播的系统
			ro = router.resolve({
				path: '/business-monitor/home/index',
				query: {
					systemId: currentQuery.systemId,
				},
			});
			break;
		case 5:
			// 点击失败量趋势跳转至业务查询
			ro = router.resolve({
				path: '/business-monitor/monitor-query/business-overview-list',
				query: currentQuery,
			});
			break;
		case 6:
			// 点击请求量趋势跳转至网端总览
			ro = router.resolve({
				path: '/business-monitor/monitor/network-detail/index',
				query: currentQuery,
			});
			break;
		case 7:
			// 点击系统业务访问量TOP10跳转至首页，首页显示的系统为当前轮播的系统
			ro = router.resolve({
				path: '/business-monitor/home/index',
				query: {
					systemId: currentQuery.systemId,
				},
			});
			break;
		case 8:
			// 点击系统告警趋势跳转至网端总览
			ro = router.resolve({
				path: '/business-monitor/monitor/network-detail/index',
				query: currentQuery,
			});
			break;
		case 9:
			// 点击高级告警信息列表跳转至高级告警页
			ro = router.resolve({
				path: '/business-monitor/monitor-query/custom-alarm-list',
				query: currentQuery,
			});
			break;
		case 10:
			// 点击系统网端告警TOP10跳转至首页，首页显示的系统为当前轮播的系统
			ro = router.resolve({
				path: '/business-monitor/home/index',
				query: {
					systemId: currentQuery.systemId,
				},
			});
			break;
	}
	window.open(ro?.href, '_blank');
};
const getTime3 = () => {
	const time1 = parseTime(new Date(formData.endTime.replace(new RegExp(/-/gm), '/')).getTime() - 10 * 60 * 1000);

	const time2 = new Date(time1.replace(new RegExp(/-/gm), '/'));
	time2.setMinutes(time2.getMinutes() - parseInt(String(new Date(time1.replace(new RegExp(/-/gm), '/')).getMinutes() % 10)));

	const time3 = parseTime(new Date(time2).getTime() - 1 * 5 * 60 * 60 * 1000, '{y}-{m}-{d} {h}:{i}:00');
	return time3;
};
</script>

<style rel="stylesheet/scss" lang="scss">
.cockpit-container {
	overflow: hidden;
	height: 100%;
	background: linear-gradient(#36759c, #323c73);
	color: #ffffff !important;

	/* 禁止文本选中 */
	user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;

	/* el-table样式覆盖 */
	/* 行选中样式 */
	.el-table__body tr.current-row > td {
		background-color: #1c2b5d;
		cursor: pointer;
	}
	.el-table .el-table__header-wrapper th,
	.el-table .el-table__fixed-header-wrapper th {
		height: 30px;
	}
	.el-table--mini {
		th,
		td {
			padding: 4px 0;
		}
	}

	/* 加载层 */
	.el-loading-mask {
		background-color: rgba(255, 255, 255, 0.1);
	}

	.left-aside {
		padding: 0 0 0 10px;
		margin: 0;
		background-color: #ffffff00;
	}
	.right-aside {
		padding: 0 10px 0 0;
		margin: 0;
		background-color: #ffffff00;
	}

	/* 标题 */
	.system-title {
		background-image: url('@/assets/images/bpm/cockpit/title.png');
		background-position: center top;
		text-align: center;
		font-family: 'PingFang';
		font-size: 36px;
		letter-spacing: 10px;
		text-shadow: 3px 3px 9px #01153b;
		height: 100px;
		padding-top: 14px;
	}

	.col-container {
		padding: 0 0 10px 0;
	}

	/* 特殊处理 */
	.chart-background-system-overview {
		height: 100%;
		background-image: url('@/assets/images/bpm/cockpit/chart_background_system_overview.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
	}

	.chart-title {
		padding: 10px 0 0 10px;
		color: #ffffff;
		font-size: 18px;
		font-family: 'PingFang';
		height: 15%;
		span {
			margin-left: 10px;
		}
	}

	.header {
		padding: 0 10px;
	}
	.main {
		padding: 10px;
		overflow: hidden;
	}
	.footer {
		padding: 0 10px 10px 10px;
		height: 20%;
	}
	/* 轮播 */
	.advanced-alarm-info {
		padding: 10px 10px 10px 35px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		cursor: pointer;
		font-size: 12px;
	}
	.swiper-slide {
		display: flex;
		align-items: center;
	}
	.single {
		background-color: #1c2b5d;
	}
	.swiper-wrapper {
		width: 97%;
	}
	.double {
		background-color: #ffffff00;
	}
	.swiper-pagination-bullet-active {
		background-color: #ffffff;
	}
	.swiper-pagination-bullet {
		background: #ffffff;
	}
	.zhankai {
		float: right;
		font-size: 12px;
		margin-right: 20px;
	}
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
:deep(.cockpit-container) {
	.chart-title span {
		margin-left: 0;
	}
}
:deep(.el-table) {
	background: #264c7b;
	tr {
		background: #264c7b;
		color: #fff;
	}
	tr:hover {
		cursor: pointer;
		td.el-table__cell {
			background-color: #56698d;
		}
	}
	.el-table__header-wrapper {
		th {
			background: #264c7b !important;
			color: #29eded;
		}
	}
}

/*自定义列弹框样式*/
:deep(.custom-table-class) {
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: calc(100% - 30px);
	max-width: calc(100% - 30px);
	min-width: 650px;
	.el-dialog__body {
		flex: 1;
		overflow: auto;
	}
	.el-form-item {
		margin-bottom: 0;
	}
}
// :deep(#custom-table-dialog .el-form-item.is-error .el-input__inner) {
// 	border: 2px solid #e22236;
// }
// :deep(#custom-table-dialog) {
// 	.el-dialog {
// 		background-image: url('@/assets/images/bpm/dialog/init-dialog.png');
// 		background-repeat: no-repeat;
// 		background-position: center;
// 		background-size: 100% 100%;
// 		background-color: transparent;
// 	}
// 	.el-button {
// 		color: #1b2a5a;
// 		font-size: 16px;
// 		width: 160px;
// 	}
// 	.el-checkbox__inner {
// 		background-color: transparent;
// 		width: 17px;
// 		height: 17px;
// 		border: 1px solid #2beded;
// 	}
// 	.el-checkbox__inner::after {
// 		border: 1px solid #2beded;
// 		left: 6px;
// 		top: 3px;
// 		box-sizing: content-box;
// 		content: '';
// 		border-left: 0;
// 		border-top: 0;
// 		height: 7px;
// 		position: absolute;
// 	}
// 	.el-dialog__body {
// 		padding: 20px 60px;
// 	}
// 	.el-input__prefix {
// 		top: 5px;
// 		left: 10px;
// 	}
// 	.el-input__inner {
// 		// background-color: rgba(255, 0, 0, 0);
// 		color: #fff;
// 		text-align: center;
// 		border: 2px solid #dcdfe6;
// 		padding-right: 25px;
// 	}
// }
// #custom-table-dialog .el-button--default {
// 	background-color: transparent;
// 	color: #2beded;
// }
:deep(.el-icon-edit-outline) {
	background: url('@/assets/icons/png/edit.png') no-repeat;
	background-size: 18px;
	&:before {
		content: '';
		font-size: 16px;
		visibility: hidden;
	}
}
.el-form-item__label {
	line-height: 36px;
}
:deep(.el-dialog__header .el-dialog__title) {
	background-image: url('@/assets/images/bpm/dialog/init-title.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	color: #ffffff;
	font-size: 15px;
	display: inline-block;
	width: 140px;
	padding-left: 5px;
	height: 26px;
}
.el-checkbox {
	color: #606266;
	font-weight: 500;
	font-size: 14px;
	position: relative;
	cursor: pointer;
	display: inline-block;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin-right: 10px;
	margin-left: 20px;
}

/*高级查询弹框样式*/
.icon-style {
	margin-top: 5px;
	font-size: 26px;
	color: #dcdfe6;
}
//   :deep(.el-dialog.advanced-query-class){
//     border: 2px solid #2beded;
//     box-shadow: 0px 0px 30px #2beded inset;
//     background-color: rgba(19, 30, 60, 0.8);
// }
:deep(.advanced-query-class) {
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: calc(100% - 30px);
	max-width: calc(100% - 30px);
	min-width: 800px;
	border: 2px solid #2beded;
	box-shadow: 0px 0px 30px #2beded inset;
	background-color: rgba(19, 30, 60, 0.8);
	.el-dialog__body {
		flex: 1;
		overflow: auto;
	}
	.el-form-item {
		margin-bottom: 0;
	}
}
:deep(#advanced-query-form-dialog) {
	.el-dialog {
		border: 2px solid #2beded;
		box-shadow: 0px 0px 30px #2beded inset;
		background-color: rgba(19, 30, 60, 0.8);
	}
	.el-button {
		color: #1b2a5a;
		font-size: 16px;
		width: 160px;
	}
	.el-dialog__body {
		padding: 20px 60px;
	}
	.el-input__prefix {
		top: 5px;
		left: 10px;
	}
	.el-input__inner {
		background-color: rgba(255, 0, 0, 0);
		color: #fff;
		text-align: center;
		border: 2px solid #dcdfe6;
		padding-right: 25px;
	}

	.el-select-dropdown__list {
		text-align: center;
	}
	.el-select-dropdown.el-popper {
		border: none;
		border-radius: 10px;
		.el-scrollbar {
			color: #fff;
			border-radius: 6px;
			background-color: #121d40;
		}
	}
	.el-select-dropdown .popper__arrow {
		display: none;
	}
	.el-select-dropdown__item {
		text-align: center;
		color: #fff;

		&:before {
			content: '';
			position: absolute;
			top: 5px;
			right: 0.063rem;
			width: 0.25rem;
			height: 1.563rem;
			background: #2beded;
			vertical-align: center;
			transform: scaleX(0);
			transform-origin: right;
			-webkit-transition: -webkit-transform 475ms cubic-bezier(0.8, 0, 0.2, 1);
			transition: -webkit-transform 475ms cubic-bezier(0.8, 0, 0.2, 1);
		}
	}
	.el-select-dropdown__item.hover,
	.el-select-dropdown__item:hover {
		background-color: rgba(255, 154, 12, 0);

		&:before {
			transform: scaleX(1);
		}
	}
	.el-select-dropdown__item.selected {
		color: #2beded;
	}
	.select-coutom {
		top: auto !important;
		left: auto !important;
	}
}
#advanced-query-form-dialog .el-button--default {
	background-color: transparent;
	color: #2beded;
}
#advanced-query-form-dialog section {
	margin-bottom: 10px;
}
.mt-20 {
	margin-top: 20px;
}
#advanced-el-form {
	text-align: center;
}

/* 列表 */
:deep(#bus_detail_list_table) {
	tr:nth-child(even) {
		background: #1c2b5d;
	}

	.el-table td {
		border: none;
	}

	.el-table th.is-leaf {
		border-bottom: none;
	}

	.el-table__header-wrapper,
	.el-table__footer-wrapper {
		border-bottom: 2px solid #ddd;
		border-image: linear-gradient(to right, rgba(18, 30, 71, 0.85) 30%, rgba(12, 216, 223, 0.91), rgba(153, 247, 250, 0.91)) 20 20;
	}
}

/* 分页 */
.yd-pagination {
	text-align: right;
	// margin-top: 10px;
	margin-right: 38px;

	:deep(.el-pager) {
		li {
			color: #ffffff;
			background-color: #ffffff00;

			&:hover {
				background-color: #84ffff;
				color: #1c2b5d;
				border-radius: 3px;
			}

			&.active {
				background-color: #0097a7;
				border-radius: 3px;
				color: #ffffff;
				cursor: default;
			}
		}
	}
}

:deep(.el-pagination .btn-prev),
:deep(.el-pagination .btn-next) {
	color: #ffffff;
	background-color: #ffffff00;

	&:hover {
		background-color: #84ffff;
		color: #1c2b5d;
		border-radius: 3px;
	}
}

.table-operation-text {
	color: #ffffff;
	margin-left: 6px;
	text-decoration: underline;
	&:hover {
		color: #2beded;
	}
	&.active {
		color: #ff9a0c;
	}
}
:deep(.el-dialog) {
	height: 600px;
}
</style>
<style rel="stylesheet/scss" lang="scss">
.el-tooltip__popper.is-light {
	color: #1b2a5a;
}
</style>
